<template>
  <div class="home">
    <span id="msg">{{ msg }}</span>
    <el-button type="primary" class="button" icon="el-icon-s-order" @click="watchTemplate">查看模板</el-button>
    <el-button type="success" class="button" icon="el-icon-s-marketing" @click="parseTemplate">数据分析</el-button>
    <el-button type="danger" class="button" icon="el-icon-upload" @click="updateTemplate">上传文档</el-button>
    <el-drawer
        id="drawer"
        title="文本模板下载"
        :visible.sync="drawer"
        direction=ltr
        :before-close="handleClose">
      <el-button type="primary" @click="downloadDoc('food')">食品word模板</el-button>
    </el-drawer>
  </div>
</template>

<script>
  import {getStaticDoc} from "../network/static"
  export default {
    name: "Home",
    data(){
      return{
        msg: '基于模板的文档自动生成系统',
        drawer: false
      }
    },
    methods:{
      watchTemplate(){
        this.drawer=true
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      downloadDoc(doc){
        window.location.href = `http://localhost:8881/static/${doc}`
      },
      updateTemplate(){
        this.$router.push("/template")
      },
      parseTemplate(){
        this.$router.push("/parse")
      }
    }
  }
</script>

<style scoped>
  .home{
    background-image: url(../assets/picture/background.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  #drawer{
    height: 100%;
  }
  #msg{
    font-weight: bold;
    font-size: 4rem;
    position: relative;
    left: 38.3rem;
    top: 9rem;
    color: #1E90FF;
    text-shadow: 3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8),7px 7px rgba(197, 223, 248,0.8),8px 8px rgba(197, 223, 248,0.8);
  }
  .button{
    position: relative;
    top: 20rem;
    padding-inline: 2rem;
    margin-right: 5rem;
  }
</style>